<script setup>
import { ref,defineModel,defineProps,defineEmits } from 'vue';

let dialogFormVisible = defineModel({required: true});
let props = defineProps({ // 定义props
    title: { // 标题
        type: String, // 类型为String
        default: '', 
    },
    width: { // 宽度
        type: String, // 类型为String
        default: '500', 
    },
});

// 定义事件
const emits = defineEmits(['submit', 'cancel']); // 定义事件，submit和cancel是自定义的事件名，用于触发父组件的事件

const oncancel = () => { 
    dialogFormVisible.value = false; // 隐藏对话框
    emits('cancel'); // 触发cancel事件
};
const onSubmit = () => { // 提交表单
    emits('submit'); // 触发父组件submit事件
};

</script>

<template>
    <!-- 对话框组件封装 -->
    <el-dialog v-model="dialogFormVisible"  :title="props.title" :width="props.width">
        <slot></slot>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="oncancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>

<style scoped>

</style>
